<td-layout-nav color="primary">
  <div td-toolbar-content layout="row" layout-align="start center" flex>
    <!-- <span hide-gt-xs class="tc-blue-500 md-subhead">Landing</span>
      <span hide-xs class="tc-blue-500 md-subhead">Landing Page Template</span> -->
    <!-- <span class="tc-white md-subhead text-upper">Posts</span> -->
    <a class="tc-white" [routerLink]="['/']">
      <md-icon>keyboard_backspace</md-icon>
    </a>
    <!-- <span flex></span> -->
    <td-search-box flex backIcon="arrow_back" placeholder="Search posts by keywords" [showUnderline]="true" [debounce]="500"
      [alwaysVisible]="true" (searchDebounce)="searchByTerm($event)" (search)="updateTerm($event)" (clear)="clearTerm($event)">
    </td-search-box>
    <button md-icon-button [mdMenuTriggerFor]="viewModeMenu">
        <!-- <td-notification-count color="accent" [notifications]="12">
          <md-icon>notifications</md-icon>
        </td-notification-count> -->
        <md-icon>{{viewModeIcon}}</md-icon>
    </button>
    <md-menu class="tc-white" #viewModeMenu="mdMenu">
      <td-menu>
        <!-- <div td-menu-header class="md-subhead">Job Openings</div> -->
        <md-nav-list dense>
          <a md-list-item (click)="changeViewMode('list')">
            <md-icon md-list-icon>list</md-icon>
            <h4 md-line><span class="text-wrap text-upper">List</span></h4>
          </a>
          <md-divider></md-divider>
          <a md-list-item (click)="changeViewMode('grid_on')">
            <md-icon md-list-icon>grid_on</md-icon>
            <h4 md-line><span class="text-wrap text-upper">Grid</span></h4>
          </a>
        </md-nav-list>
      </td-menu>
    </md-menu>
  </div>

  <section class="bgc-blue-grey-50" style="width:100%;height:100%;">
    <div flex class="pad" tdMediaToggle="gt-xs" [mediaClasses]="['pad-xl']">
      <div class="push-top-xl" hide-xs></div>
      <md-card flex>
        <md-card-header>
          <!-- <div md-card-avatar class="example-header-image"></div> -->
          <md-card-title class="text-upper">All Posts</md-card-title>
          <md-card-subtitle></md-card-subtitle>
        </md-card-header>
        <md-card-content>
          <md-nav-list *ngIf="viewModeIcon==='list'">
            <h2 md-subheader class="text-upper tc-blue-grey-100" *ngIf="q">Search results</h2>
            <a md-list-item flex [routerLink]="['/posts', 'view', post.slug]" *ngFor="let post of posts ">
              <img md-list-avatar src="" />
              <h3 md-line class="tc-blue-grey-500">{{post.title}}</h3>
              <p md-line class="tc-blue-grey-300">{{post.author.username}} &bull; {{post.createdDate|date:'short'}}</p>

              <!-- <div>
          <a md-icon-button [routerLink]="['/posts', 'edit', post.id]">
            <md-icon>edit</md-icon>
          </a>
          <a md-icon-button [routerLink]="['/posts', 'view', post.id]">view</a>
        </div> -->

            </a>

            <!-- <md-list-item>
        <p md-line class="tc-blue-grey-300">Press</p>
      </md-list-item> -->
          </md-nav-list>


          <md-grid-list flex *ngIf="viewModeIcon==='grid_on'" gutterSize="2rem" cols="2" rowHeight="2:1">
            <md-grid-tile *ngFor="let post of posts">
              <p class="md-display-2" style="height:auto;width:auto;">{{post.title}}
            </md-grid-tile>
          </md-grid-list>
        </md-card-content>
        <md-card-footer>
        </md-card-footer>
      </md-card>
      <div class="push-bottom-xl" hide-xs></div>
    </div>
  </section>
</td-layout-nav>
<a md-fab color="primary" mdTooltip="New Post" mdTooltipPosition="above" class="mat-fab-position-bottom-right fixed" [routerLink]="['/posts/new']">
  <md-icon>add</md-icon>
</a>

